<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../layui/css/layui.css" media="all" />
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
 
<table class="layui-hide" id="test"></table>
 
<script type="text/html" id="switchTpl">
  <!-- 这里的 checked 的状态只是演示 -->
  <input type="checkbox" name="sex" value="{{d.sex}}" lay-skin="switch" lay-text="女|男" lay-filter="sexDemo" {{ d.sex == 1? 'checked' : '' }}>
</script>
 
<script type="text/html" id="checkboxTpl">
  <!-- 这里的 checked 的状态只是演示 -->
  <input type="checkbox" name="lock" value="{{d.id}}" title="锁定" lay-filter="lockDemo" {{ d.id == 10006 ? 'checked' : '' }}>
</script>

              
          
	<script type="text/javascript" src="../../layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> 
 
<script>

var data = [
	{
		"id": 10000,
		"username": "user-0",
		"sex": 1,
		"city": "城市-0",
		"sign": "签名-0",
		"experience": 255,
		"logins": 24,
		"wealth": 82830700,
		"classify": "作家",
		"score": 57
	},
	{
		"id": 10001,
		"username": "user-1",
		"sex": 0,
		"city": "城市-1",
		"sign": "签名-1",
		"experience": 884,
		"logins": 58,
		"wealth": 64928690,
		"classify": "词人",
		"score": 27
	},
	{
		"id": 10002,
		"username": "user-2",
		"sex": 1,
		"city": "城市-2",
		"sign": "签名-2",
		"experience": 650,
		"logins": 77,
		"wealth": 6298078,
		"classify": "酱油",
		"score": 31
	},
	{
		"id": 10003,
		"username": "user-3",
		"sex": 1,
		"city": "城市-3",
		"sign": "签名-3",
		"experience": 362,
		"logins": 157,
		"wealth": 37117017,
		"classify": "诗人",
		"score": 68
	},
	{
		"id": 10004,
		"username": "user-4",
		"sex": 0,
		"city": "城市-4",
		"sign": "签名-4",
		"experience": 807,
		"logins": 51,
		"wealth": 76263262,
		"classify": "作家",
		"score": 6
	},
	{
		"id": 10005,
		"username": "user-5",
		"sex": 1,
		"city": "城市-5",
		"sign": "签名-5",
		"experience": 173,
		"logins": 68,
		"wealth": 60344147,
		"classify": "作家",
		"score": 87
	},
	{
		"id": 10006,
		"username": "user-6",
		"sex": 1,
		"city": "城市-6",
		"sign": "签名-6",
		"experience": 982,
		"logins": 37,
		"wealth": 57768166,
		"classify": "作家",
		"score": 34
	},
	{
		"id": 10007,
		"username": "user-7",
		"sex": 0,
		"city": "城市-7",
		"sign": "签名-7",
		"experience": 727,
		"logins": 150,
		"wealth": 82030578,
		"classify": "作家",
		"score": 28
	},
	{
		"id": 10008,
		"username": "user-8",
		"sex": 0,
		"city": "城市-8",
		"sign": "签名-8",
		"experience": 951,
		"logins": 133,
		"wealth": 16503371,
		"classify": "词人",
		"score": 14
	},
	{
		"id": 10009,
		"username": "user-9",
		"sex": 1,
		"city": "城市-9",
		"sign": "签名-9",
		"experience": 484,
		"logins": 25,
		"wealth": 86801934,
		"classify": "词人",
		"score": 75
	}
];
layui.use('table', function(){
  var table = layui.table
  ,form = layui.form;
  table.render({
    elem: '#test'
     ,data:data
    ,cellMinWidth: 80
    ,cols: [[
      {type:'numbers'}
      ,{type: 'checkbox'}
      ,{field:'id', title:'ID', width:100, unresize: true, sort: true}
      ,{field:'username', title:'用户名', templet: '#usernameTpl'}
      ,{field:'city', title:'城市'}
      ,{field:'wealth', title: '财富', minWidth:120, sort: true}
      ,{field:'sex', title:'性别', width:85, templet: '#switchTpl', unresize: true}
      ,{field:'lock', title:'是否锁定', width:110, templet: '#checkboxTpl', unresize: true}
    ]]
    ,page: true
  });
  
  //监听性别操作
  form.on('switch(sexDemo)', function(obj){
    layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
  });
  
  //监听锁定操作
  form.on('checkbox(lockDemo)', function(obj){
    layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
  });
});
</script>

</body>
</html><body>